<template>
	<view class="launch-order">
		<view class="form">
			<view class="form-item">
				<view class="label">收费模式</view>
				<view class="value">
					<view class="radio">
						<view
							v-for="(radio, index) in chargingModeList"
							:key="index"
							:class="['radio-item', form.charging_mode == radio.value ? 'active' : '']"
							@click="handleChangeChargingMode(radio)"
						>
							{{ radio.text }}
						</view>
					</view>
				</view>
			</view>
			<view v-if="form.charging_mode == 1" class="form-item">
				<view class="label">需要工时</view>
				<view class="value">
					<view class="input">
						<input v-model="form.require_work_time" type="number" />
						<view class="line"></view>
						<view class="unit" @click="openChargingUnitActionSheet">
							<text v-if="form.charging_unit == 0">小时</text>
							<text v-if="form.charging_unit == 1">天</text>
							<uv-icon name="arrow-down" style="margin-left: 5px"></uv-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="label">我愿出价</view>
				<view class="value">
					<view class="input">
						<input v-model="form.offer" type="number" />
						<view class="line"></view>
						<view class="unit">
							<template v-if="form.charging_mode == 0">
								<text>元</text>
							</template>
							<template v-if="form.charging_mode == 1">
								<text v-if="form.charging_unit == 0">元/小时</text>
								<text v-if="form.charging_unit == 1">元/天</text>
							</template>
						</view>
					</view>
				</view>
			</view>
			<view class="form-item column">
				<view class="label">需要补充</view>
				<view class="value">
					<view class="textarea">
						<uv-textarea
							v-model="form.supplement"
							maxlength="100"
							count
							placeholder="1.主要工作内容；&#10;2.工作时长；&#10;3.是否需要特殊工具、其他需要；"
						></uv-textarea>
					</view>
				</view>
			</view>
			<view class="form-item column">
				<view class="label">现场图片</view>
				<view class="value">
					<uni-file-picker v-model="form.images"></uni-file-picker>
				</view>
			</view>
			<view class="form-item">
				<view class="computed">
					<view class="l">计费金额（含服务费10%）</view>
					<view class="v">￥{{ total }}</view>
				</view>
			</view>
			<view class="bottom">
				<view :class="['submit-button', disabled ? 'disabled' : 'active']" @click="handleLaunchOrder">立即下单</view>
			</view>
		</view>
		<uni-pay ref="uniPayRef" mainColor="#f6d44c" returnUrl="/pages/order-details/order-details"></uni-pay>
	</view>
</template>

<script setup>
import { onLoad } from "@dcloudio/uni-app";
import { computed, onMounted } from "vue";
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import autobackToast from "@/utils/autobackToast";
import createOrderNo from "@/utils/createOrderNo";

const db = uniCloud.database().collection("order");

const needToNumberField = ["employment_time", "male_numbers", "female_numbers"];

const chargingModeList = [
	{
		text: "自己出价",
		value: 0
	},
	{
		text: "计时",
		value: 1
	}
];

const uniPayRef = ref();

const form = ref({
	user_id: uni.getStorageSync("uni-id-pages-userInfo")._id,
	job_type_id: "",
	employment_time: "",
	address: "",
	longitude: "",
	latitude: "",
	house_number: "",
	male_numbers: "",
	female_numbers: "",
	charging_mode: 0,
	offer: "",
	supplement: "",
	images: [],
	require_work_time: "",
	charging_unit: 0,
	order_no: ""
});

// 总价
const total = computed(() => {
	const peoples = form.value.male_numbers + form.value.female_numbers;
	let totalFee = 0;
	if (form.value.charging_mode == 0) {
		totalFee = form.value.offer * peoples;
	} else {
		totalFee = form.value.offer * peoples * form.value.require_work_time;
	}
	return Number((totalFee * 1.1).toFixed(2));
});

const disabled = computed(() => {
	return !total.value;
});

const handleChangeChargingMode = (radio) => {
	form.value.charging_mode = radio.value;
	form.value.require_work_time = "";
	form.value.charging_unit = 0;
	form.value.offer = "";
};

const openChargingUnitActionSheet = () => {
	uni.showActionSheet({
		itemList: ["小时", "天"],
		success: (event) => {
			if (event.tapIndex == 0) {
				form.value.charging_unit = 0;
			} else if (event.tapIndex == 1) {
				form.value.charging_unit = 1;
			}
		}
	});
};

const handlePay = () => {};

const handleLaunchOrder = () => {
	if (disabled.value) return;
	form.value.offer = Number(form.value.offer);
	form.value.require_work_time = Number(form.value.require_work_time);
	form.value.order_no = createOrderNo();
	const out_trade_no = `${form.value.order_no}-trade`;
	const total_fee = Number((total.value * 100).toFixed(0));
	console.log(total_fee);
	uniPayRef.value.open({
		total_fee,
		order_no: form.value.order_no,
		out_trade_no,
		description: `景元用工订单`,
		type: "goods",
		custom: form.value
	});
};

onLoad((params) => {
	console.log(params);
	Object.assign(form.value, params);
	needToNumberField.forEach((key) => {
		form.value[key] = Number(form.value[key]);
	});
	console.log(form.value);
});
</script>

<style lang="scss" scoped>
.launch-order {
	overflow-y: auto;

	.form {
		.form-item {
			margin-top: 20px;
			background-color: #ffffff;
			padding: 10px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			&.column {
				flex-direction: column;
				align-items: baseline;

				.label {
					margin-bottom: 10px;
				}

				.value {
					width: 100%;
				}
			}

			.label {
				color: #333333;
			}

			.value {
				.radio {
					display: flex;
					.radio-item {
						padding: 5px 10px;
						border-radius: 5px;
						margin-left: 20px;
						border: 1px $uni-color-primary solid;
						color: #666666;
						&.active {
							background-color: $uni-color-primary;
							color: #ffffff;
						}
					}
				}

				.input {
					display: flex;
					align-items: center;
					background-color: #f7f7f7;

					input {
						width: 100px;
						text-align: right;
					}

					.line {
						width: 1px;
						height: 31px;
						background-color: #efefef;
						margin-left: 10px;
					}

					.unit {
						color: #666666;
						padding: 5px 15px;
						display: flex;
						align-items: center;
					}
				}

				.textarea {
					.textarea-input {
						flex: 1;
					}
				}
			}

			.computed {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 100%;

				.l {
					font-size: 14px;
					color: #666666;
					margin-bottom: 5px;
				}

				.v {
					font-weight: bold;
					font-size: 18px;
				}
			}
		}

		.bottom {
			padding: 20px;
			.submit-button {
				margin-top: 50px;
				color: #ffffff;
				background-color: $uni-color-primary;
				padding: 10px;
				border-radius: 50px;
				text-align: center;

				&.active:active {
					filter: brightness(0.8);
				}

				&.disabled {
					background-color: #999999;
				}
			}
		}
	}
}
</style>
